// 创建整个应用的路由器
import VueRouter from "vue-router";
import About from "@/pages/About.vue";
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import Message from "@/pages/Message.vue";
import Detail from "@/pages/Detail.vue";

// 创建并暴露一个路由器
const router = new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About,
        },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: { // 配置路由的元信息，添加程序员自定义的信息
                        isAuth: true, // 这条消息是自定义的
                    },
                    beforeEnter: (to, from, next) => { // 独享路由守卫，只有前置，没有后置
                        // to去哪个路由，from来自哪个路由，next放行
                        console.log('路由切换之前')
                        if (to.meta.isAuth) {
                            if (localStorage.getItem('name') === 'wjz') { // 一般是从vuex的store中获取name
                                next();
                            }
                        } else {
                            next();
                        }
                    }
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:title',
                            component: Detail,
                            // props第一种写法，值为对象，以props的形式传递给Detail组件,只能传递死数据
                            // props: {a:1,b:'hello'},

                            // props第二种写法，值为布尔值，如果为真，就会把路由组件收到的所有params参数以props的形式传递给Detail组件,注意：对query参数无效
                            // props: true,

                            // props第三种写法，值为一个函数
                            // props($route) { // 传递过来$route
                            //     return {
                            //         id: $route.params.id,
                            //         title: $route.params.title
                            //     }
                            // },
                            props({params: {id, title}}) { // 连续结构赋值
                                return {id, title}
                            }
                        }
                    ],
                    meta: { // 配置路由的元信息，添加程序员自定义的信息
                        isAuth: true
                    }
                }
            ]
        }
    ]
})

// // 全局前置路由守卫，在初始化、每一次路由切换之前都会调用
// router.beforeEach((to, from, next) => {
//     // to去哪个路由，from来自哪个路由，next放行
//     console.log('路由切换之前')
//     if (to.meta.isAuth) {
//         if (localStorage.getItem('name') === 'wjz') { // 一般是从vuex的store中获取name
//             next();
//         }
//     } else {
//         next();
//     }
// })
//
// // 全局后置路由守卫，在初始化、每一次路由切换之后都会调用
// router.afterEach((to, from) => {
//     console.log('路由切换之后')
//     document.title = to.name || 'title'
// })

export default router